<!DOCTYPE html>
<html>
    <head>
            <meta charset="UTF-8">
          <title>简单测试</title>
      </head>
     <body>

     <button class="button" id="button">Play</button>

        <script type="text/javascript">
            window.AudioContext = window.AudioContext || window.webkitAudioContext;

                if (!window.AudioContext) {
                    alert('当前浏览器不支持Web Audio API');

                }

                // 按钮元素
                let eleButton = document.getElementById('button');



                // 创建新的音频上下文接口
                var audioCtx = new AudioContext();


                var analyser = audioCtx.createAnalyser();
                // 发出的声音频率数据，表现为音调的高低
                var arrFrequency = [30,40,50,60,70,80,90,100,
                    150,200,250,300,350,400,450,500,550,600,650,700,750,800,850,900,950,1000,
                    1500,2000,2500,3000,3500,4000,4500,5000,5500,6000,6500,7000,7500,8000,8500,9000,
                    9500,10000,11000,12000,13000,14000,15000,16000,17000,18000,19000,20000

                  ];



                     let fre = 1000
                    for(let i=0;i<100;i++){
                       // arrFrequency.push(fre)
                    }


/*
                150,200,250,300,350,400,450,500,550,600,650,700,750,800,850,900,950,1000,
                    1500,2000,2500,3000,3500,4000,4500,5000,5500,6000,6500,7000,7500,8000,8500,9000,
                    9500,10000,11000,12000,13000,14000,15000,16000,17000,18000,19000,20000

  */              // 鼠标hover我们的按钮的时候
                eleButton.addEventListener('click', function () {

                    for(let i=0,len = arrFrequency.length;i<20000;i++){
                        setTimeout(function(){
                            fn(arrFrequency[i])
                        },50*i)
                    }


                })
                function fn(_frequency){
                    // 当前频率
                    let frequency = _frequency;

                    // 创建一个OscillatorNode, 它表示一个周期性波形（振荡），基本上来说创造了一个音调
                    var oscillator = audioCtx.createOscillator();
                    // 创建一个GainNode,它可以控制音频的总音量
                    var gainNode = audioCtx.createGain();
                    // 把音量，音调和终节点进行关联
                    oscillator.connect(gainNode);
                    // audioCtx.destination返回AudioDestinationNode对象，表示当前audio context中所有节点的最终节点，一般表示音频渲染设备
                    gainNode.connect(audioCtx.destination);
                    // 指定音调的类型，其他还有square|triangle|sawtooth
                    oscillator.type = 'sine';
                    // 设置当前播放声音的频率，也就是最终播放声音的调调
                    oscillator.frequency.value = frequency;
                    // 当前时间设置音量为0
                    gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
                    // 0.01秒后音量为1
                    gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
                    // 音调从当前时间开始播放
                    oscillator.start(audioCtx.currentTime);
                    // 1秒内声音慢慢降低，是个不错的停止声音的方法
                    gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.1);
                    // 1秒后完全停止声音
                    oscillator.stop(audioCtx.currentTime + 0.1);
                }

          </script>
    </body>
 </html>